<template>
    <div>
        <label>姓名：</label>
        <Input type="text" v-model="searchForm.name" placeholder="姓名" style="width: 100px;"/>
        <label>联系电话：</label>
        <Input type="text" v-model="searchForm.phone" placeholder="联系电话" style="width: 120px;"/>
        <label>身份证号码：</label>
        <Input type="text" v-model="searchForm.idCard" placeholder="身份证号码" style="width: 200px;"/>
        <label>工种：</label>
        <!--<Input type="text" v-model="searchForm.workType" placeholder="工种" style="width: 100px;"/>-->
        <Select v-model="searchForm.workType" style="width:270px;" :multiple="true">
            <Option v-for="item in workType" :value="item" :key="item"></Option>
        </Select>
        <label>期望工作城市：</label>
        <!--<Input type="text" v-model="searchForm.expectCity" placeholder="城市" style="width: 100px;"/>-->
        <Select v-model="searchForm.expectCities" style="width:250px;" placeholder="城市" :multiple="true">
            <Option v-for="item in expectCities" :value="item" :key="item"></Option>
        </Select>
        请选择审核状态：
        <Select v-model="searchForm.isRealName" style="width:100px;margin-right: 20px;">
            <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Button type="primary" @click="search">搜索</Button>
        <Table stripe border :columns="columns" :data="rows" style="margin-top:10px;"></Table>
        <Page :total="total" :page-size="pageCount" @on-change="pageChange" style="margin-top:10px;text-align:center;"/>
        <modal width="800" :title="modal.title" v-model="modal.show" @on-ok="save">
            <Form :model="form" :rules="rule" :label-width="140">
                <FormItem label="姓名：">
                    <!--<Input type="text" v-model="form.name" placeholder="工人姓名" style="width: 200px;" readonly/>-->
                    <label>{{form.name}}</label>
                </FormItem>
                <FormItem label="性别：">
                    <!--<Select v-model="form.sex" style="width:100px;" disabled>-->
                    <!--<Option value="未知">未知</Option>-->
                    <!--<Option value="男">男</Option>-->
                    <!--<Option value="女">女</Option>-->
                    <!--</Select>-->
                    <label>{{form.sex}}</label>
                </FormItem>
                <FormItem label="身份证号码：">
                    <!--<Input type="text" v-model="form.idCard" placeholder="身份证号码" style="width: 500px;" readonly/>-->
                    <label>{{form.idCard}}</label>
                </FormItem>
                <FormItem label="身份证正面照：">
                    <img :src="form.idCardImg">
                </FormItem>
                <FormItem label="联系电话：">
                    <!--<Input type="text" v-model="form.phone" placeholder="一般填手机号码" style="width: 300px;" readonly/>-->
                    <label>{{form.phone}}</label>
                </FormItem>
                <FormItem label="籍贯：">
                    <!--<Select v-model="form.province" @on-change="changeProvince" style="width:150px;">-->
                    <!--<Option v-for="item in provinces" :value="item.name" :key="item.name">{{item.name}}</Option>-->
                    <!--</Select>-->
                    <!--<Select v-model="form.city" @on-change="changeCity" style="width:150px;">-->
                    <!--<Option v-for="item in cities" :value="item.name" :key="item.name">{{item.name}}</Option>-->
                    <!--</Select>-->
                    <!--<Select v-model="form.area" style="width:150px;">-->
                    <!--<Option v-for="item in areas" :value="item" :key="item">{{item}}</Option>-->
                    <!--</Select>-->
                    <label>{{form.province}}-{{form.city}}-{{form.area}}</label>
                </FormItem>
                <FormItem label="工种：">
                    <!--<CheckboxGroup v-model="form.workType">-->
                    <!--<Checkbox v-for="item in workType" :label="item" :key="item"></Checkbox>-->
                    <!--</CheckboxGroup>-->
                    <Tag color="primary" v-for="item in form.workType">{{item}}</Tag>
                </FormItem>
                <FormItem label="期望工作城市：">
                    <!--<CheckboxGroup v-model="form.expectCities">-->
                    <!--<Checkbox v-for="item in expectCities" :label="item" :key="item"></Checkbox>-->
                    <!--</CheckboxGroup>-->
                    <Tag color="primary" v-for="item in form.expectCities">{{item}}</Tag>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="warning" @click="validate(form,false)" style="margin-right:20px">审核不通过</Button>
                <Button type="success" @click="validate(form,true)">审核通过</Button>
            </div>
        </modal>
        <modal v-model="idImg.show">
            <img :src="idImg.idCardImg">
        </modal>
    </div>
</template>
<script>
    import util from '../../libs/util';

    let baseRouter = '/admin/worker';
    let modalName = '工人';
    export default {
        data() {
            return {
                modal: {
                    show: false,
                    title: '',
                    isAdd: true,
                },
                idImg: {
                    show: false,
                    idCardImg: '',
                },
                columns: [
                    {title: '姓名', key: 'name', width: 80},
                    {title: '性别', key: 'sex', width: 70},
                    {title: '联系电话', key: 'phone', width: 120},
                    {title: '身份证号码', key: 'idCard', width: 160},
                    {title: '省', key: 'province', width: 70},
                    {title: '市', key: 'city', width: 70},
                    {title: '区', key: 'area', width: 100},
                    {title: '工种', key: 'workType'},
                    {title: '期望工作城市', key: 'expectCities'},
                    {
                        title: '身份证正面照', key: 'idCardImg', width: 160,
                        render: (h, params) => {
                            return h('div', [
                                h('Img', {
                                    attrs: {
                                        src: params.row.idCardImg,
                                    },
                                    style: {
                                        width: "80px"
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index);
                                        }
                                    }
                                }),])
                        }
                    },
                    {
                        title: '操作', key: '_id', width: 150, render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                        shape: 'circle'
                                    },
                                    style: {
                                        marginRight: '20px',
                                        display: params.row.isRealName == 1 ? 'none' : 'display'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index);
                                        }
                                    }
                                }, '审核'),
                                h('span', {
                                    style: {
                                        marginRight: '10px',
                                        display: params.row.isRealName == 0 ? 'none' : 'display'
                                    },
                                }, ' 已审核 '),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        shape: 'circle'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                ],
                total: 0,
                page: 1,
                pageCount: 20,
                workType: [],
                expectCities: [],
                provinces: [],
                cities: [],
                areas: [],
                rows: [],
                form: {},
                defaultForm: {
                    name: '',
                    idCard: '430',
                    sex: '男',
                    phone: '1',
                    workType: [],
                    expectCities: [],
                    province: '湖南',
                    city: '湘潭',
                    area: '雨湖区'
                },
                statusList: [
                    {value: -1, label: "所有工人"},
                    {value: 0, label: "未实名"},
                    {value: 1, label: "已实名"}
                ],
                searchForm: {
                    name: '',
                    idCard: '',
                    phone: '',
                    workType: [],
                    expectCities: [],
                    isRealName: -1,
                    wk_id: '',
                },
                rule: {
                    key: [],
                },
                loginData: '',

            }
        },
        created() {
            this.$vnode.fnContext.menuText = '业务管理';
            this.$vnode.fnContext.optionText = `${modalName}管理`;
            this.form = Object.assign({}, this.defaultForm);
            this.loginData = JSON.parse(localStorage.getItem('LOGINDATA'));
            this.getWorkType();
            this.getExpectCities();
            this.getProvince();
            this.getList();
        },
        methods: {
            edit(index) {
                this.changeProvince(this.rows[index].province);
                this.changeCity(this.rows[index].city);
                Object.assign(this.form, this.rows[index]);
                this.modal.isAdd = false;
                this.modal.show = true;
                this.modal.title = `审核${modalName}`;
            },
            remove(index) {
                util.getAdminJsonData(`${baseRouter}/remove`, {wk_id: this.rows[index]._id}, this, (data) => {
                    console.log(data);
                    this.getList();
                });
            },
            getList() {
                let params = Object.assign({}, {page: this.page, rows: this.pageCount}, this.searchForm);
                params.workType = this.searchForm.workType.join(',');
                params.expectCities = this.searchForm.expectCities.join(',');
                util.loginId = this.loginData.loginId;
                util.token = this.loginData.token;
                console.log(this.searchForm);
                console.log(params);
                util.postAdminJsonData(`${baseRouter}/list`, params, this, (data) => {
                    console.log(data);
                    this.total = data.total;
                    this.rows = data.rows;
                });
            },
            pageChange(current) {
                this.page = current;
                this.getList();
            },
            search() {
                this.page = 1;
                this.getList();
            },
            save() {
                let url = this.modal.isAdd ? `${baseRouter}/add` : `${baseRouter}/update`;
                let obj = Object.assign({}, this.form);
                obj.workType = obj.workType.filter((item) => {
                    return !!item
                });
                obj.workType = obj.workType.join(',');
                obj.expectCities = obj.expectCities.filter((item) => {
                    return !!item
                });
                obj.expectCities = obj.expectCities.join(',');
                util.postAdminJsonData(url, obj, this, (data) => {
                    this.getList();
                });
            },
            getWorkType() { //获取新增表单中的工作
                util.getAdminJsonData(`/admin/dictionary/getJSON`, {key: '工种'}, this, (data) => {
                    this.workType = data;
                });
            },
            getExpectCities() { //获取期望工作城市
                util.getAdminJsonData(`/admin/dictionary/getJSON`, {key: '期望工作城市'}, this, (data) => {
                    this.expectCities = data;
                });
            },
            getProvince() { //省市区
                util.getAdminJsonData(`/admin/dictionary/getJSON`, {key: '省市区'}, this, (data) => {
                    this.provinces = data;
                    this.changeProvince('湖南');
                    this.changeCity('湘潭');
                    this.form.city = '湘潭';
                    this.form.area = '雨湖区';
                });
            },
            changeProvince(value) {
                let p = this.provinces.find((item) => {
                    return item.name === value
                });
                if (!!p) {
                    this.form.city = [p.children[0].name];
                    this.cities = p.children;
                }
            },
            changeCity(value) {
                let p = this.cities.find((item) => {
                    return item.name === value
                });
                if (!!p) {
                    this.form.area = [p.children[0]];
                    this.areas = p.children;
                }
            },
            show(index) {
                this.idImg.show = true;
                this.idImg.idCardImg = this.rows[index].idCardImg;
            },
            validate(item, isValid) {
                console.log(item);
                let params = {
                    wk_id: item._id,
                    isRealName: isValid ? '1' : '0'
                };
                util.postAdminJsonData(`${baseRouter}/validate`, params, this, (data) => {
                    console.log(data);
                    this.modal.show = false;
                    this.$Notice.success({
                        desc: '审核成功 '
                    });
                });
            },
        }
    }
</script>
